class Carousel{
    constructor(cname){
        this.container = document.getElementsByClassName(cname)[0]
        this.ulis = this.container.querySelectorAll(".carousel_ul li")
        this.olis = this.container.querySelectorAll(".carousel_ol li")
        this.leftBtn = this.container.querySelector(".leftbtn")
        this.rightBtn = this.container.querySelector(".rightbtn")
        this.index = 0
        this.timerId = null
    }
    start(){
        this.rightBtn.onclick = ()=>{
            this.index++;
            this.tab()
        }
        this.leftBtn.onclick = ()=>{
            this.index--;
            this.tab()
        }
        for(let i=0;i<this.olis.length;i++){
            this.olis[i].onclick = ()=>{
                this.index = i;
                this.tab()
            }
        }
        this.auto()
        this.container.onmouseover = ()=>{
            clearInterval(this.timerId)
        }
        this.container.onmouseout = ()=>{
            this.auto()
        }
    }
    auto(){
        this.timerId = setInterval(()=>{
            this.index++;
            this.tab()
        },3000)
    }
    tab(fn){
        if(this.index===this.ulis.length){
            this.index=0
        }
        if(this.index<0){
            this.index=this.ulis.length-1
        }
        for(let i=0;i<this.ulis.length;i++){
            this.ulis[i].className = '';
            this.olis[i].className = '';
        }
        this.ulis[this.index].className = this.olis[this.index].className = 'active';
    }
}